<template>
  <div class="index">
    <je-panel
      :top="options.top"
      :bottom="options.bottom"
      :left="options.left"
      :right="options.right"
    >
      <template #left><MenuTree></MenuTree></template>
      <template #default><MenuForm></MenuForm></template>
    </je-panel>
  </div>
</template>

<script>
  import { Panel } from '@jecloud/ui';

  import MenuTree from '@/views/menu-tree.vue';
  import MenuForm from '@/views/menu-form.vue';

  export default {
    name: 'Index',
    components: {
      JePanel: Panel,
      MenuTree,
      MenuForm,
    },
    setup() {
      const options = {
        left: { size: 232, split: true },
      };

      return {
        options,
      };
    },
  };
</script>
<style scoped>
  .index {
    width: 1250px;
    margin: 0 auto !important;
    padding: 10px !important;
  }
</style>
